<template>
  <view class="commentWrap">
    <view class="text1">留言 评论 （{{ commentTotal }}条）</view>
    <uv-list :customStyle="{ border: 'none' }">
      <uv-list-item v-for="item of commentList" :key="item.commentId">
        <view class="commentItem">
          <view class="title">
            <view class="nameWrap">
              <uv-image
                :src="`${env.ossBucket}${item.authorProfileUrl}`"
                width="50rpx"
                height="50rpx"
                shape="circle"
              ></uv-image>
              <view class="commentName">{{ item.authorName }}</view>
            </view>
          </view>
          <view class="commentContent pl64" @click="handlerReplay(item)">
            {{ item.content }}
          </view>
          <view class="flex f-ai-c mt20 pl64" @click="handlerReplay(item)">
            <view class="time">
              {{ dayjs(item.createdTimestamp).format("YYYY-MM-DD HH:mm:ss") }}
            </view>
            <view class="replayContent ml20"> 回复 </view>
          </view>
          <!-- 下级回复 -->
          <view class="replayWrap">
            <view
              v-for="subItem of item.subComments"
              :key="subItem.commentId"
              class="replayItem"
              @click="handlerReplay(item)"
            >
              <text class="text1">{{ subItem.authorName }}：</text>
              <text v-if="subItem.repliedUserId" class="text2">
                回复{{ subItem.repliedUserName }}:
              </text>
              <text class="text3">{{ subItem.content }}</text>
            </view>
          </view>
        </view>
      </uv-list-item>
    </uv-list>
  </view>
  <commentCreate ref="commentCreateRef" />
</template>

<script setup>
import { ref, toRef, provide } from "vue";
import dayjs from "/utils/dayjs/index.js";
import commentCreate from "./commentCreate.vue";

import useUserInfo from "/utils/useUserInfo.js";

import ArticleManagement from "/api/articleManagement.js";

const { userInfo } = useUserInfo();

const props = defineProps({
  detailId: {
    type: Number,
    required: true,
  },
});

const commentCreateRef = ref(null);
const detailId = toRef(props, "detailId");
const commentList = ref([]);
const commentTotal = ref(0);

const gteCommentManagement = () => {
  ArticleManagement.gteCommentManagement(detailId.value).then((res) => {
    commentList.value = res.data;
  });
};

const replayItem = ref({});
const valueConfirm = (content) => {
  ArticleManagement.createCommentManagement({
    content,
    articleId: detailId.value,
    authorId: userInfo.value.userId,
    repliedCommentId: replayItem.value?.commentId,
    repliedUserId: replayItem.value?.authorId,
  }).then((res) => {
    gteCommentManagement();
  });
};
const handlerReplay = (item) => {
  replayItem.value = item;
  commentCreateRef.value.showInput();
};

uni.$on("detailCommentConfirm", valueConfirm);
gteCommentManagement();

provide("replayItem", replayItem);
</script>

<style lang="scss">
.commentWrap {
  padding: 28rpx 74rpx;
  margin-top: 28rpx;
  border-top: 1px solid #eeeeee;
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom) / 2);
}
.text1 {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 22rpx;
}
.commentItem {
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 20rpx;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.time {
  font-size: 20rpx;
  color: #999999;
}
.nameWrap {
  display: flex;
  align-items: center;
}
.commentName {
  font-size: 26rpx;
  color: #666666;
  margin-left: 14rpx;
  display: flex;
}
.commentContent {
  font-size: 28rpx;
  color: #333333;
}
.replayContent {
  font-size: 24rpx;
  color: #666;
}
.replayWrap {
  margin-left: 64rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  padding-bottom: 12rpx;
  background-color: rgba($color: #999, $alpha: 0.1);
  border-radius: 8rpx;
  overflow: hidden;
  font-size: 26rpx;
  .replayItem {
    margin-bottom: 8rpx;
  }
  .text1 {
    color: #999;
  }
  .text2 {
    color: #333;
  }
  .text3 {
    color: #333;
  }
}
</style>
